---
title: Word Rotate
date: 2024-05-21
description: A vertical rotation of words
author: dillionverma
published: true
---

<ComponentPreview name="word-rotate-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/word-rotate
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install motion
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="word-rotate" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Usage

```tsx showLineNumbers
import { WordRotate } from "@/components/ui/word-rotate"
```

```tsx showLineNumbers
<WordRotate words={["Word", "Rotate"]} />
```

## Props

| Prop          | Type              | Default | Description                                   |
| ------------- | ----------------- | ------- | --------------------------------------------- |
| `className`   | `string`          | `-`     | The class name to be applied to the component |
| `duration`    | `number`          | `2500`  | Duration of the animation                     |
| `words`       | `string[]`        | `""`    | An array of words to rotate through           |
| `motionProps` | `HTMLMotionProps` | `{}`    | An object containing motion animation props   |
